<template>
	<view class="box">
		<!-- 头部 -->
		<view class="box-top">
			<view class="top-title">
				<p>彩活动</p>
			</view>
			<view class="lunbo-box">
				<u-swiper height="350" class='lunbo' :list="list"></u-swiper>
			</view>
			<view class="top-group" v-if='isFalse'>
				<img class='qiu' src='http://127.0.0.1:7001/public/activity/qiu.png' />
				<img class='Microphone' src='http://127.0.0.1:7001/public/activity/Microphone.png' />
				<img class='medal' src='http://127.0.0.1:7001/public/activity/jiangpai.png' />
				<img class='Micro' src='http://127.0.0.1:7001/public/activity/daocha.png' />
				<span @click='getending'>组局</span>
			</view>
			<!-- 类型 -->
			<view class="top-group" v-if="isTrue">
				<u-toast ref="uToast" />
				<view class="top-group-conent" v-if="isA">
					<view class="ty" @click="show = true">
						<picker mode="selector" :range="userList" range-key="hobby" @change="checkStudent"
							:value="aIndex" class="right">
							<img v-if="Isbock" src='http://127.0.0.1:7001/public/activity/type.png'>
							<view v-if="Isdisplay">
								<img :src='userList[aIndex].hobbyurl' />
								{{userList[aIndex].hobby}}
							</view>
						</picker>
						<view class="picker">
							<p v-if="Isbock">类型</p>
						</view>
					</view>


					<view class='ty' @click="timeshow = true">
						<view v-if="itemtext">
							<img src='http://127.0.0.1:7001/public/activity/time.png'>
							时间
						</view>

						<view class="desc">
						</view>
						<p class='itemtext' v-if="Isitem">{{timetext.month}}-{{timetext.day}}
							{{timetext.hour}}:{{timetext.minute}}
						</p>
					</view>
					<view class='ty' @click="onintroduce()">
						<img v-if="isintroduce" src='http://127.0.0.1:7001/public/activity/pressed.png'>
						<img v-if="isint" src='http://127.0.0.1:7001/public/activity/duihao.png'>
						介绍
					</view>
				</view>


				<!-- 今天修改 -->
				<!-- 发布  -->
				<view class="top-group-conent" v-if="isa">
					<img class='fabu1' src='http://127.0.0.1:7001/public/activity/fabu1.png' />
					<view class='fabu' :style="'transform: translate('+ x +'px,' + y +'px);'" @touchstart="touchS"
						@touchmove.stop.prevent="touchM" @touchend="touchE">

						<img src='http://127.0.0.1:7001/public/activity/fabu.png' />
						<p class='fabu1span'>发布</p>
					</view>
				</view>
				<!-- 今天修改 -->






			</view>

			<view class="top-group-box" style="background: #f3f3f3; width: 100%; height:10px"></view>
		</view>
		<!-- 内容 -->
		<view class="box-content">
			<!-- 今天明天后天 -->
			<view class="content-title">
				<li @click="tab=0" :class="{tab_active:tab==0}" class='anniu'><span>今天</span></li>
				<li @click="tab=1" :class="{tab_active:tab==1}" class='anniu'><span>明天</span></li>
				<li @click="tab=2" :class="{tab_active:tab==2}" class='anniu'><span>后天</span></li>
			</view>
			<!-- 用户 -->
			<view class="Userinformation-box" v-if="tab==0">
				<view class="Userinformation" @click="getDetails(item.id)" v-for="item in showList" :key="item.id">
					<!-- 用户头像 -->
					<view class="yhtx">
						<img class='headportrait' :src='item.url' />
					</view>
					<!-- 用户信息 -->
					<view class="username">
						<span class='name'>{{item.name}}</span>
						<img class='real' src='http://127.0.0.1:7001/public/activity/shenfen.png' />
						<span class='user-item'>{{item.time.slice(10,16)}}</span>
						<span class='user-miaoshu'>{{item.interest}}</span>
					</view>
					<!-- 用户爱好 -->
					<view class="hobby">
						<img :src='item.hobbyurl'>
						<span>{{item.hobby}}</span>
					</view>
				</view>
			</view>
			<view class="Userinformation-box" v-if="tab==1">
				<view class="Userinformation" @click="getDetails(item.id)" v-for="item in user" :key="item.id">
					<!-- 用户头像 -->
					<view class="yhtx">
						<img class='headportrait' :src='item.url' />
					</view>
					<!-- 用户信息 -->
					<view class="username">
						<span class='name'>{{item.name}}</span>
						<img class='real' src='http://127.0.0.1:7001/public/activity/shenfen.png' />
						<span class='user-item'>22:00</span>
						<span class='user-miaoshu'>{{item.interest}}</span>
					</view>
					<!-- 用户爱好 -->
					<view class="hobby">
						<img :src='item.hobbyurl'>
						<span>{{item.hobby}}</span>
					</view>
				</view>
			</view>

			<view class="Userinformation-box" v-if="tab==2">
				<view class="Userinformation" @click="getDetails(item.id)" v-for="item in  showList" :key="item.id">
					<!-- 用户头像 -->
					<view class="yhtx">
						<img class='headportrait' :src='item.url' />
					</view>
					<!-- 用户信息 -->
					<view class="username">
						<span class='name'>{{item.name}}</span>

						<span class='user-item'>22:00</span>
						<span class='user-miaoshu'>{{item.interest}}</span>
					</view>
					<!-- 用户爱好 -->
					<view class="hobby">
						<img :src='item.hobbyurl'>
						<span>{{item.hobby}}</span>
					</view>
				</view>
			</view>
			<!-- 添加的 -->

		</view>

		<u-picker mode="time" @confirm='confirm' v-model="timeshow" :params="params" @click="release()"></u-picker>
		<u-loadmore style='margin-top: 15px;' :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 今天
				start: {
					left: 0,
				},
				x: 0,
				y: 0,
				oldx: 0,
				screenWidth: 300,
				// 加载更多
				status: 'loadmore',
				isFalse: true,
				isTrue: false,
				// 选择类型
				aIndex: 0,
				Isbock: true,
				typeArray: [],
				// 时间
				timeshow: false,
				timetext: '',
				timetitle: '',
				timeyear: '',
				Isitem: false,
				itemtext: true,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
				},
				// 介绍
				textintroduce: '',
				showList: [],
				isintroduce: true,
				isint: false,
				pageNum: 5,
				tab: 0,
				times: '',
				// 轮播图
				list: [{
						image: 'http://127.0.0.1:7001/public/activity/lunbo1.png',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				// 总数据
				userList: [],
				// 明天的数据
				user: [],
				tab: 0,
				isFlag: false,
				Isdisplay: false,

				// 发布
				options: [{
					text: '发布',
					style: {
						backgroundColor: 'coral'
					}
				}],
				// 今天修改
				isA: true,
				isa: false,
				lists: []
			};
		},

		onLoad(option) {
			this.$api.LogingetMsg().then(res => {
					this.lists = res.data
				}),
				// 接收接收传入的数据
				uni.$on('value', (value) => {
					this.textintroduce = value
				})
			// 获取明日的数据
			this.$api.Whj().then(res => {
				this.user = res.data
			})

		},
		onShow() {
			this.$api.WhjUser().then(res => {
				this.userList = res.data
				this.showList = this.userList.slice(0, this.pageNum)
			})
		},
		// 下拉加载更多
		onReachBottom() {
			this.status = 'loading';
			setTimeout(() => {
				let newData = this.userList.slice(this.pageNum, this.pageNum += 5)
				this.showList.push(...newData)
				this.status = 'nomore'
			}, 1000)
		},
		// 上拉刷新
		onPullDownRefresh() {
			let newData = this.userList.slice(this.pageNum, this.pageNum += 5)
			this.showList.splice(0, 5, ...newData)
			if (this.showList.length == 0) {
				this.$api.WhjUser().then(res => {
					this.userList = res.data
					this.showList = this.userList.slice(0, this.pageNum)
				})

			}
			uni.startPullDownRefresh()
		},
		methods: {
			// 组局显示隐藏
			getending() {
				this.isFalse = false
				this.isTrue = true
			},
			// 跳转详情页
			getDetails(id, item) {
				uni.navigateTo({
					url: `./details/details?id=${id}`
				})
			},
			// 类型
			checkStudent(e) {
				this.aIndex = e.detail.value
				this.typeArray = this.userList[this.aIndex]
				this.Isdisplay = true
				this.Isbock = false
			},
			// 时间
			confirm(e) {
				this.timetext = e
				this.Isitem = true
				this.itemtext = false
				this.timetitle = `  ${this.timetext.hour}:${this.timetext.minute}`
				this.timeyear = `${this.timetext. year}-${this.timetext.month}-${this.timetext.day}`
			},
			// 跳转介绍页 
			onintroduce() {
				uni.navigateTo({
					url: './introduce/introduce'
				})
				uni.$on('value', (value) => {
					this.textintroduce = value
					if (this.textintroduce.value !== undefined) {
						this.isintroduce = false
						this.isint = true
					}
				})
			},

			// 今天
			touchS(val) {
				this.start.left = val.changedTouches[0].clientX
			},
			touchM(val) {
				if (this.x <= 0 && this.x > -200) {
					let clientX = val.changedTouches[0].clientX
					this.x = this.oldx + clientX - this.start.left
				}
			},
			touchE(val) {
				if (this.x = -200) {
					var a = {
						// 活动
						name: this.lists.nickname,
						url: this.lists.avatar,
						hobby: this.typeArray.hobby,
						// 活动图片
						hobbyurl: this.typeArray.hobbyurl,
						// 时间
						time: this.timetitle,
						// 活动详情
						interest: this.textintroduce.value,
						state: 0,
						addinterest: this.textintroduce.value,
						addhobbyurl: this.typeArray.hobbyurl,
						addhobby: this.typeArray.hobby,
						data: this.timeyear
					}
					this.$api.addWhjUser(a).then(res => {
						this.isA = true
						this.isa = false
						this.typeArray = []
						this.timetitle = ''
						this.textintroduce = ''
						this.$api.WhjUser().then(res => {
							this.userList = res.data
							this.showList = this.userList.slice(0, this.pageNum)
						})
					})
					this.x = 0
					this.$refs.uToast.show({
						title: '发布成功',
						type: 'success',
						url: '/pages/user/index'
					})
				}
			}

		},
		computed: {
			rotateSliders() {
				const {
					typeArray,
					timetitle,
					textintroduce
				} = this
				return {
					typeArray,
					timetitle,
					textintroduce
				}
			},
		},
		watch: {
			rotateSliders() {
				if (this.typeArray.length !==0  && this.timetitle !== '' && this.textintroduce !== '') {
					this.isA = false
					this.isa = true
				}
			}
		},

	}
</script>

<style lang="scss">
	// 盒子总高度
	.box {
		width: 100%;
	}

	.box-top {
		width: 100%;
		height: 38%;

		.top-title {
			width: 100%;
			height: 80upx;

		}


		.top-title p {
			font-size: 18px;
			text-align: center;
			line-height: 80upx;
			font-weight: 500;

		}

		// 组团样式
		.top-group {
			width: 100%;
			height: 240upx;
			position: relative;

			// 选择活动类型
			.top-group-conent {
				width: 100%;
				height: 237upx;
				position: relative;
			}

			span {
				font-size: 40upx;
				position: absolute;
				top: 32%;
				left: 44%;
				z-index: 3;
				color: coral;
			}

			.ty {
				width: 20%;
				height: 80px;
				border-radius: 20%;
				border: 1px solid #f2f2f2;
				float: left;
				margin-left: 10%;
				margin-top: 9%;
				font-size: 30upx;
				text-align: center;
				line-height: 10px;

				img {
					width: 46%;
					margin: 10% 24%;
				}

				.itemtext {
					font-size: 25upx;
					line-height: 78px;
					color: darkorchid;
					font-weight: 800;
				}

				.ty-bottom {
					width: 100%;
					height: 15%;

					margin-top: 3%;
				}
			}

		}

		// 轮播图
		.lunbo-box {
			width: 100%;
			height: 300upx;

			.lunbo {
				z-index: 2;

			}
		}

		// 球
		.qiu {
			width: 8%;
			height: 28%;
			position: absolute;
			top: 14%;
			left: 6%;
			z-index: 1;
			opacity: 0.3
		}



		.Micro {
			width: 7%;
			height: 22%;
			position: absolute;
			top: 10%;
			left: 80%;
			z-index: 3;
			opacity: 0.3
		}

		.Microphone {
			width: 7%;
			height: 22%;
			position: absolute;
			top: 50%;
			left: 20%;
			opacity: 0.3
		}

		.medal {
			width: 174upx;
			height: 228upx;
			position: absolute;
			top: -16%;
			left: 38%;
			z-index: 3;
		}


	}





	// 内容

	.box-content {
		width: 100%;
		height: 62%;

		// 今天 明天 后天
		.content-title {
			width: 100%;
			height: 8%;
			border-bottom: 1px solid #f2f2f2;
			display: flex;

			li {
				width: 30%;
				list-style: none;
				margin-left: 3%;

				span {
					font-size: 35upx;
					text-align: center;
					display: block;
					line-height: 46px;
				}

				span:hover {
					color: coral;
				}
			}
		}

		// 用户的信息
		.Userinformation-box {

			width: 100%;
			height: 92%;

		}

		.Userinformation {
			border-bottom: 1px solid #f2f2f2;
			width: 100%;
			height: 21%;

			display: flex;

			// 用户头像
			.yhtx {
				width: 20%;
				height: 200upx;

				img {
					width: 130upx;
					margin: 36upx 16upx;
				}
			}

			.username {
				width: 60%;
				height: 150upx;
				margin-top: 18px;

				.name {
					font-size: 30upx;
					display: block;
					float: left;
					margin: 0 16upx;
				}

				.real {
					width: 44upx;
					height: 34upx;
					float: left;
					margin: 6upx 6upx;
				}

				.user-item {
					font-size: 40upx;
					display: block;
					clear: both;
					margin-left: 15upx;
				}

				.user-miaoshu {
					display: block;
					margin-left: 20upx;
				}
			}

			.hobby {
				width: 20%;
				height: 200upx;

				img {
					width: 80upx;
					margin: 40upx 40upx;
				}

				span {
					display: block;
					color: #999;
					font-size: 25upx;
					text-align: center;
					margin-top: -20upx;
				}
			}
		}
	}



	// 底部提示
	.dibu {
		display: block;
		color: gold;
		font-size: 35upx;
		text-align: center;
		line-height: 100upx;
	}


	// 今天修改 发布
	.fabu1 {
		width: 200upx;
		float: left;
		position: absolute;
		top: 70px;
		left: 100px;
	}


	.fabu {
		float: left;
		width: 80px;
		height: 80px;
		position: absolute;
		top: 43px;
		right: 25px;

		img {
			width: 80px;

		}

	}

	.fabu1span {
		position: absolute;
		top: 25px;
		right: 21px;
		font-size: 20px;
		color: coral;
	}
</style>
